<template>
  <div style="div">
    url： {{ fileList?fileList:'暂无链接' }}
    <br />
    时长：{{ duration?duration:0 }} s
    <el-upload
      class="avatar-uploader el-upload--text"
      :action="http"
      :show-file-list="false"
      :headers="headers"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-progress="uploadVideoProcess"
    >
      <i v-if="!this.fileList" class="el-icon-plus avatar-uploader-icon" />
      <video
        v-else
        ref="video"
        :src="this.fileList"
        class="avatar video-avatar"
        controls="controls"
      >您的浏览器不支持视频播放</video>

      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :width="178"
        :percentage="videoUploadPercent"
        style="    position: absolute;
    left: 0px;
    background: #fff;"
      />
      <el-button class="video-btn" slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <P v-if="isShowUploadVideo" class="text">请上传大小10M以内，时长不超过15秒的视频</P>
  </div>
</template>
<script>
import service from "@/utils/request";
export default {
  props: {
    fileList: "",
    fileNum: Number,
    duration: 0,
    //   hideUpload:Boolean,
    required: true
  },
  data() {
    return {
      vsrc: this.fileList,
      http: service.defaults.baseURL + "/upload",
      uploadUrl: "", // 你要上传视频到你后台的地址
      videoFlag: false, // 是否显示进度条
      videoUploadPercent: "", // 进度条的进度，
      isShowUploadVideo: false // 显示上传按钮
    };
  },
  computed: {
    headers() {
      return {
        Authorization: "Bearer " + localStorage.getItem("token") // 直接从本地获取token就行
      };
    }
  },
  created() {
    // this.getPolicy()
    console.log(this.http);
  },
  mounted() {},
  watch: {
    fileList(val) {
      console.log(val);
    }
  },
  methods: {
    // 上传前回调
    beforeUploadVideo(file) {
      console.log(file.size / 1024 / 1024);
      const isLt50M = file.size / 1024 / 1024 < 50;
      // if (["video/mp4"].indexOf(file.type) == -1) {
      //   //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
      //   this.$message.error("请上传正确的视频格式");
      //   return false;
      // }
      
      if (!isLt50M) {
        this.$message.error("上传视频大小不能超过50MB哦!");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },

    // 上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.$message.warning(res.msg);
      console.log(res);
      if (res.code == 0) {
        const datas = { ...res };

        this.$emit("callfun", {
          duration: this.duration,
          url: res.data
        });
      }
      //   if (res.errorCode == "00") {
      //     this.global.fileList = res.sprbody.urlAddress;
      //     // this.videoForm.fileList = res.data.uploadUrl;
      //   } else {
      //     this.$message.error("视频上传失败，请重新上传！");
      //   }
    }
  }
};
</script>
<style scoped>
/* .avatar-uploader /deep/ .el-progress-circle{
    width: 178px;
    height: 178px;
} */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
